<template>
  <div>
    <el-select
      v-model="value"
      placeholder="请选择"
      size="small"
      class="select"
      filterable
      :disabled="disabled"
      @change="handleChangeHead"
    >
      <el-option
        v-for="(item, index) in arr"
        :key="index"
        :label="item.columnName"
        :value="item.dataBaseFiled"
      >
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  name: "screen",
  model: {
    prop: "fatherValue", // 父组件v-model绑定的值传递给props中的fatherValue
    event: "childValueChange",
    // 通过emit触发childValueChange将内部值传递给父组件v-model绑定的值
  },
  props: {
    headData: {
      type: Array,
      default: [],
    },
    disabled:{
      type:Boolean,
      default:false
    },
    fatherValue: { type: String },
  },
  data() {
    return {
      value: this.fatherValue,
      arr:[]
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {
    headData: {
      handler(newVal, oldVal) {
        this.arr = newVal
        this.format()
      },
    },
  },

  methods: {

    format(){
        this.arr = this.arr.filter((item)=>{
            return item.isCanSearch
        })
        this.value = this.arr[0].dataBaseFiled
    },

    //下拉框选择事件
    handleChangeHead() {
      this.$emit("childValueChange", this.value);
    },
  },
};
</script>
<style lang="scss" scoped>
.select {
  max-width: 140px;
}
</style>
